<template>
    <div class="store">
        <WingBlank>
            <store-header :store="store"/>
            <router-view/>
        </WingBlank>
        <store-tabbar :id="id"/>
    </div>
</template>

<script>
  import { store as Store } from "@mall/api-services"
  import StoreHeader from "@/views/store/StoreHeader"
  import WingBlank from "@/components/WingBlank"
  import StoreTabbar from "@/views/store/StoreTabbar"

  export default {
    name: "Store",
    components: {
      StoreTabbar,
      WingBlank,
      StoreHeader,
    },
    props: {
      id: String,
    },
    data() {
      return {
        store: new Store.Store(),
      }
    },
    watch: {
      id: function(id, oldId) {
        console.log(id, oldId)
      },
      "$route": "refreshStore",
    },
    created() {
      this.refreshStore()
    },
    methods: {
      refreshStore() {
        const { id } = this
        if (id) {
          Store.StoreServiceV1.getStore(id)
            .then(aStore => this.store = aStore)
        }
      },
    },
  }
</script>

<style scoped>
    .store {

    }
</style>
